<template>
    <div class="index body">
        <ul class="big1">
            <li>
                <router-link to="/userRegister">
                    <div class="imgbox imgbox1"></div>
                    <p>注册用户</p>
                </router-link>
            </li>
            <li>
                <!--<router-link to="/userApply">-->
                <!--<div class="imgbox imgbox3"></div>-->
                <!--<p>申请用户</p>-->
                <!--</router-link>-->
                <router-link to="/person">
                    <div class="imgbox imgbox2"></div>
                    <p>个人中心</p>
                </router-link>
            </li>
        </ul>
        <ul class="big2">
            <router-link to="/generalization">
                <div class="imgbox imgbox5"></div>
                <p>扫码推广</p>
            </router-link>
        </ul>

        <!--<ul class="big4">-->
        <!--<router-link to="/person">-->
        <!--<div class="imgbox imgbox3"></div>-->
        <!--<p>个人中心</p>-->
        <!--</router-link>-->
        <!--</ul>-->
        <ul class="big3">
            <li>
                <router-link to="/userEntry">
                    <div class="imgbox imgbox4"></div>
                    <p>客户录入</p>
                </router-link>
            </li>
            <li>
                <router-link to="/customer">
                    <div class="imgbox imgbox3"></div>
                    <p>我的客户</p>
                </router-link>
            </li>
        </ul>
        <ul class="big4">
            <router-link to="/identityperson">
                <div
                    class="imgbox imgbox8"
                    style="margin:0.2rem auto 0.1rem"
                ></div>
                <p>客户预审</p>
            </router-link>
        </ul>
    </div>
</template>

<script>
import logo from "../components/logo";

export default {
    components: { logo },
    name: "index",
    data: function() {
        return {
            list: [{ name: "登录" }, { name: "注册" }, { name: "扫码推广" }]
        };
    },
    mounted() {}
};
</script>

<style scoped lang="less">
.index {
    overflow: auto;
    background: #f4f4f4;

    a {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;

        .imgbox {
            width: 0.9rem;
            height: 0.9rem;
            margin: 0.8rem auto 0.3rem auto;
        }

        .imgbox1 {
            background: url("../img/zhuce.png") 0 0 no-repeat;
            background-size: cover;
        }

        .imgbox2 {
            background: url("../img/shenqing.png") 0 0 no-repeat;
            background-size: cover;
        }

        .imgbox3 {
            background: url("../img/wode.png") 0 0 no-repeat;
            background-size: cover;
        }

        .imgbox4 {
            background: url("../img/kehu.png") 0 0 no-repeat;
            background-size: cover;
        }

        .imgbox5 {
            background: url("../img/tiuguan.png") 0 0 no-repeat;
            background-size: cover;
        }

        .imgbox8 {
            background: url("../img/kehushenhe.png") 0 0 no-repeat;
            background-size: cover;
        }

        p {
            text-align: center;
            font-size: 0.34rem;
            color: #fff;
            letter-spacing: 2px;
        }
    }

    .zhuce {
        width: 3rem;
        height: 3rem;
        background-image: -webkit-linear-gradient(top, #24e8a4, #15cb8a);
    }

    .big1 {
        margin-top: 0.5rem;
        height: 3rem;
        overflow: hidden;
        padding: 0 0.45rem;

        li {
            float: left;
            width: 3.2rem;
            height: 3rem;
        }

        li:nth-child(1) {
            background: linear-gradient(180deg, #00cc65 0%, #00d464 100%);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        li:nth-child(2) {
            background: linear-gradient(180deg, #ffa446 0%, #e26a1f 100%);
            margin-left: 0.2rem;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }

    .big2 {
        height: 3rem;
        overflow: hidden;
        margin: 0.45rem;
        background: linear-gradient(90deg, #5199ec 0%, #105ffe 100%);
        border-radius: 10px;
    }
    .big4 {
        height: 3rem;
        overflow: hidden;
        margin: 0.45rem;
        background-image: -webkit-linear-gradient(left, #e15228, #fa54ed);
        border-radius: 10px;
    }

    .big3 {
        margin-top: 0.5rem;
        height: 3rem;
        overflow: hidden;
        padding: 0 0.45rem;

        li {
            float: left;
            width: 3.2rem;
            height: 3rem;
        }

        li:nth-child(1) {
            background: linear-gradient(360deg, #d9a801 0%, #f7cf46 100%);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        li:nth-child(2) {
            background: linear-gradient(180deg, #99fceb 0%, #018bb1 100%);
            margin-left: 0.2rem;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }

    .big4 {
        height: 1.85rem;
        overflow: hidden;
        margin: 0.45rem;
        background: linear-gradient(94deg, #1362fd 0%, #4f98ec 100%);
        border-radius: 10px;
    }

    .list {
        overflow: hidden;

        a {
            display: block;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            border-bottom: 1px solid #ccc;
            color: #fff;
        }
    }
}
</style>
